<!DOCTYPE html>
<html>

<head>
    <title>汉字语义表格编辑器</title>
    <style>
        table {
            border-collapse: collapse;
            margin: 20px 0;
        }

        td,
        th {
            border: 1px solid #ddd;
            padding: 8px;
        }

        input {
            width: 120px;
            padding: 4px;
        }

        button {
            margin: 2px;
            padding: 4px 8px;
            cursor: pointer;
        }

        .disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        /* 行操作按钮样式 */
        .row-action {
            display: inline-block;
            width: 24px;
            height: 24px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
        }

        .delete-btn {
            background-color: #ff4444;
        }

        .delete-btn:hover {
            animation: hover 0.1s linear;
            animation-fill-mode: forwards;
        }

        .copy-btn {
            background-color: #ffd700;
        }

        @keyframes hover {
            from {
                transform: scale(100%, 100%);
            }

            to {
                transform: scale(110%, 110%);
            }
        }

        .copy-btn:hover {
            animation: hover 0.1s linear;
            animation-fill-mode: forwards;
        }

        #fileInput {
            display: none;
        }
    </style>
</head>

<body>
    <button id="importBtn">导入JSON</button>
    <input type="file" id="fileInput" accept=".json">
    <button id="exportBtn">导出JSON</button>

    <table id="mainTable">
        <tbody id="tableBody">
            <tr class="row">
                <td>
                    <button class="row-action delete-btn"></button>
                    <button class="row-action copy-btn"></button>
                </td>
                <td><input type="text" class="char" placeholder="汉字"></td>
                <td><input type="text" class="semantic" placeholder="语义"></td>
                <td>
                    <button class="add-cell">+</button>
                    <button class="remove-cell" disabled>-</button>
                </td>
            </tr>
            <tr class="add-row-btn">
                <td colspan="4">
                    <button class="add-row">添加新行</button>
                </td>
            </tr>
        </tbody>
    </table>

    <script>
        // 初始化事件监听
        document.addEventListener('DOMContentLoaded', () => {
            // 导入功能
            document.getElementById('importBtn').addEventListener('click', () => {
                document.getElementById('fileInput').click();
            });

            document.getElementById('fileInput').addEventListener('change', handleFileImport);
        });

        // 动态元素事件委托
        document.addEventListener('click', function (e) {
            // 添加行
            if (e.target.classList.contains('add-row')) {
                addNewRow();
            }

            // 单元格操作
            const row = e.target.closest('.row');
            if (row) {
                if (e.target.classList.contains('add-cell')) {
                    addCell(row);
                    updateRemoveButton(row);
                }
                if (e.target.classList.contains('remove-cell')) {
                    removeCell(row);
                    updateRemoveButton(row);
                }
                if (e.target.classList.contains('delete-btn')) {
                    deleteRow(row);
                }
                if (e.target.classList.contains('copy-btn')) {
                    copyRow(row);
                }
            }
        });

        // 导出功能
        document.getElementById('exportBtn').addEventListener('click', exportJSON);

        // 核心功能函数
        function addNewRow(afterRow) {
            const newRow = createRow();
            const btnRow = document.querySelector('.add-row-btn');
            const tbody = document.getElementById('tableBody');

            if (afterRow) {
                tbody.insertBefore(newRow, afterRow.nextSibling);
            } else {
                tbody.insertBefore(newRow, btnRow);
            }
        }

        function createRow() {
            const row = document.createElement('tr');
            row.className = 'row';

            // 操作按钮列
            const actionCell = document.createElement('td');
            actionCell.innerHTML = `
                <button class="row-action delete-btn"></button>
                <button class="row-action copy-btn"></button>
            `;

            // 汉字列
            const charCell = document.createElement('td');
            charCell.innerHTML = '<input type="text" class="char" placeholder="汉字">';

            // 语义列
            const semanticCell = document.createElement('td');
            semanticCell.innerHTML = '<input type="text" class="semantic" placeholder="语义">';

            // 操作按钮
            const controlCell = document.createElement('td');
            controlCell.innerHTML = `
                <button class="add-cell">+</button>
                <button class="remove-cell" disabled>-</button>
            `;

            row.append(actionCell, charCell, semanticCell, controlCell);
            return row;
        }

        function deleteRow(row) {
            if (document.querySelectorAll('.row').length > 1) {
                row.remove();
            } else {
                alert("至少需要保留一行");
            }
        }

        function copyRow(sourceRow) {
            const newRow = createRow();

            // 复制内容
            const inputs = sourceRow.querySelectorAll('input');
            const newInputs = newRow.querySelectorAll('input');

            inputs.forEach((input, index) => {
                if (index < newInputs.length) {
                    newInputs[index].value = input.value;
                }
            });

            // 复制单元格数量
            const sourceCells = sourceRow.querySelectorAll('.semantic').length;
            while (newRow.querySelectorAll('.semantic').length < sourceCells) {
                addCell(newRow);
            }

            addNewRow(sourceRow);
        }

        function handleFileImport(e) {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function (event) {
                try {
                    const data = JSON.parse(event.target.result);
                    rebuildTable(data);
                } catch (error) {
                    alert("文件解析失败");
                }
            };
            reader.readAsText(file);
        }

        function rebuildTable(data) {
            const tbody = document.getElementById('tableBody');
            tbody.innerHTML = '';

            data.forEach(item => {
                const row = createRow();
                row.querySelector('.char').value = item.char || '';

                item.semantic.forEach((sem, index) => {
                    if (index > 0) {
                        addCell(row);
                    }
                    row.querySelectorAll('.semantic')[index].value = sem;
                });

                tbody.appendChild(row);
            });

            // 添加最后的操作行
            const btnRow = document.createElement('tr');
            btnRow.className = 'add-row-btn';
            btnRow.innerHTML = `<td colspan="${getColSpan()}"><button class="add-row">添加新行</button></td>`;
            tbody.appendChild(btnRow);
        }

        function getColSpan() {
            const firstRow = document.querySelector('.row');
            return firstRow ? firstRow.cells.length : 4;
        }

        // 以下保持原有单元格操作函数不变（addCell/removeCell/updateRemoveButton）
        // 保持原有导出函数不变（exportJSON/downloadJSON）
        // ...（此处保留之前实现的单元格操作和导出功能代码）
    </script>
</body>

</html>